<template>
  <div class="selectdialogs">
    <el-dialog
      width="90%"
      :fullscreen="props.fullscreen"
      v-model="selectVisible"
      :show-close="false"
      append-to-body
      custom-class="selectdialog"
    >
      <div
        id="bigcloser"
        style="border-bottom: 1px solid #4a4c53; padding-bottom: 15px"
      >
        <strong></strong>
        <h4>
          {{ $t("language.My.selectDialogtitle") }}
        </h4>
        <span @click="selectVisible = false">
          <el-icon color="#b5b6c8" size="16"><CloseBold /></el-icon>
        </span>
      </div>
      <div class="selectbottom">
        <p style="padding-top: 30px">
          {{ $t("language.My.selectDialogtext1") }}
        </p>
        <h3>{{ $t("language.My.selectDialogtext2") }}</h3>
        <p>{{ $t("language.My.selectDialogtext3") }}</p>
        <span class="selectdialogs">{{
          $t("language.My.selectDialogBtn")
        }}</span>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {CloseBold } from '@element-plus/icons-vue'
import { shallowRef } from "vue";
let selectVisible = shallowRef<boolean>(false);
let open = ():void => {
  selectVisible.value = true;
};
let props = defineProps({
  fullscreen: {
    type: Boolean,
    default: false,
  },
});
defineExpose({
  open,
});
</script>
<style lang="scss">
 
.selectdialog {

  padding: 20px !important;
    background-color: rgb(50, 53, 62) !important;
    border-radius: 10px !important;
}
</style>
<style scoped lang="scss">
.selectbottom {
  width: 100%;
  p {
    font-size: 14px;
    color: #b5bac8;
  }
  h3 {
    font-size: 14px;
    color: #fff;
    font-weight: normal;
    margin: 20px 0;
  }
  .selectdialogs {
    display: block;
    width: 111px;
    height: 40px;
    background-color: #0a906c;
    color: #fff;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
    border-radius: 5px;
    margin: 30px auto;
  }
}
#bigcloser {
  width: 100%;
  @include flex(row, flex-end, center);
  strong {
    display: block;
    width: 28px;
    height: 28px;
  }
  h4 {
    flex: 1;
    font-size: 18px;
    color: #fff;
    text-align: center;
  }
  span {
    display: block;
    width: 28px;
    height: 28px;
    @include flex(row, center, center);
    border: 2px solid #b5b6c8;
    border-radius: 16px;
    margin-right: -7px;
  }
}
</style>
